<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security5">

<head>
    <title>网站后台管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.css}">
    <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/css/style.css}" media="all">
    <link th:href="@{/webjars/layui/2.6.8/css/layui.css}">
    <script th:src="@{/webjars/layui/2.6.8/layui.js}"></script>

</head>

<body>

    <div class="container">
        <div class="col-md-6" style="margin: 30px auto">
            <div class="inset">
                <form th:action="@{/login}" th:method="POST">
                    <div>
                        <h2>后台管理系统</h2>
                        <span style="text-align: left;text-indent: 0.4em;"><label>用户名</label></span>
                        <span><input type="text" name="account" id="uAccount" value="" class="textbox"
                                autocomplete="off"></span>
                    </div>
                    <div>
                        <span style="text-align: left;text-indent: 0.4em;"><label>密码</label></span>
                        <span><input name="authString" id="uPassword" value="" type="password" class="password"></span>
                    </div>
                    <div>
                        <span style="text-align: left;text-indent: 0.4em;"><label>验证码</label></span>
                        <span>
                            <input name="verificationCode" id="verificationCode" value="" type="text"
                                style="width: 300px" autocomplete="off">
                            <img th:src="@{/code/captcha}" id="identifyingCode" style="width: 155.391px" height="44px">
                        </span>
                    </div>
                    <div class="sign">
                        <input type="reset" class="submit" value="重置" />
                        <input type="submit" id="submitBtn" value="登录" class="submit" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script th:inline="javascript">
    var contextPath = [[@{/}]];
    layui.use('layer', function () {
        var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
            , layer = layui.layer;
        $('#identifyingCode').click(function (e) {
            e.preventDefault();
            $('#identifyingCode').attr("src", `${contextPath}code/captcha?t=${new Date().getTime()}`);
        });
        $('#submitBtn').click(function (e) {
            e.preventDefault();
            let data = {
                account: $('#uAccount').val(),
                authString: $('#uPassword').val(),
                verificationCode: $('#verificationCode').val(),
            }
            $.ajax({
                type: "post",
                url: contextPath + "login",
                data: data,
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    switch (response.code) {
                        case "200":
                            // $.post(response.location);
                            window.location.replace(response.location);
                            break;

                        default:
                            break;
                    }
                },
                error: function (xhr, status, error) {
                    switch (xhr.status) {
                        case 401:
                            switch (xhr.responseJSON.code) {
                                case "10008":
                                    // 验证码获取焦点
                                    $('#verificationCode').focus();
                                    // 页面 验证码提示
                                    layer.open({
                                        type: 4,
                                        tips: 3,
                                        content: [xhr.responseJSON.msg + xhr.responseJSON.data, '#verificationCode'],
                                        time: 2000
                                    });
                                    $('#identifyingCode').attr("src", `${contextPath}code/captcha?t=${new Date().getTime()}`);
                                    break;

                                default:
                                    break;
                            }
                            break;

                        default:
                            break;
                    }

                }
            });
            return false;
        });
    });
</script>

</html>